<template>
  <div class="found">
    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
      <el-tab-pane label="关注" name="subscribe"></el-tab-pane>
      <el-tab-pane label="推荐" name="recommend"></el-tab-pane>
      <el-tab-pane label="国家补贴" name="subsidy"></el-tab-pane>
      <el-tab-pane label="美食" name="food"></el-tab-pane>
      <el-tab-pane label="科技" name="technology"></el-tab-pane>
      <el-tab-pane label="穿搭" name="fashion"></el-tab-pane>
      <el-tab-pane label="运动" name="sport"></el-tab-pane>
      <el-tab-pane label="户外" name="outdoors"></el-tab-pane>
      <el-tab-pane label="护肤" name="skincare"></el-tab-pane>
    </el-tabs>

    <div class="product-list" v-loading="loading">
      <ProductList v-for="product in productList" :key="product.id" :product="product" />
    </div>

    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="fetchProducts"
      @current-change="fetchProducts" />
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onBeforeUnmount, inject } from 'vue'
  import ProductList from '@/components/ProductList.vue'
  import { getProductsByPageDTO } from '@/api/user'

  const activeTab = ref('recommend')
  const productList = ref<Array<product>>([])
  const currentPage = ref(1)
  const pageSize = ref(10)
  const total = ref(0)
  const loading = ref(false)
  const columns = ref(4)
  const gap = ref(10)

  const calculateLayout = () => {
    const width = window.innerWidth
    if (width < 768) {
      columns.value = 2
      gap.value = 8
    } else if (width < 1024) {
      columns.value = 3
      gap.value = 12
    } else if (width < 1440) {
      columns.value = 4
      gap.value = 16
    } else {
      columns.value = 5
      gap.value = 20
    }
  }

  const handleResize = () => {
    calculateLayout()
  }
  interface product {
    id: number
    image: string
    name: string
    price: number
    sales: number
    comments: number
    isAd: boolean
  }

  defineProps(['getIsShowScrollToTop'])

  const handleScroll = inject('handleScroll') as (flag:boolean) => void

  const fetchProducts = async () => {
    try {
      loading.value = true
      console.log(currentPage.value, pageSize.value)
      const { list, total: totalCount } = await getProductsByPageDTO({
        category: activeTab.value,
        page: currentPage.value,
        pageSize: pageSize.value,
      })
      productList.value = list
      total.value = totalCount
    } finally {
      loading.value = false
    }
  }

  const handleTabChange = () => {
    currentPage.value = 1
    fetchProducts()
  }

  onMounted(() => {
    handleScroll(false)
    calculateLayout()
    window.addEventListener('resize', handleResize)
    fetchProducts()
  })

  onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize)
  })
</script>

<style scoped>
  .found {
    padding: 1px;
  }

  .product-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: v-bind(gap + 'px');
  }

  .el-pagination {
    justify-content: center;
    margin-top: 20px;
  }
</style>
